<template>
	<div>
		<NavBar>
			<div slot="left" class="back" @click="backclick">
				<img src="../../../assets/images/common/back.svg" />
			</div>
			<div slot="center"class="title">
				<div v-for="(item,index) in titles" class="titleitem"
				:class="{active:index==currentindex}" @click="titleclick(index)">{{item}}</div>
			</div>
		</NavBar>
	</div>
</template>

<script>
	import NavBar from '../../../components/common/navbar/NavBar.vue'
	export default{
		components:{
			NavBar
		},
		data() {
			return{
				titles:['商品',"参数","评论","推荐"],
				currentindex:0
			}
		},
		methods:{
			titleclick(index){
				this.currentindex=index
				this.$emit("titleClick",index)
			},
			backclick(){
				this.$router.back()
			}
		}
	}
</script>

<style scoped="scoped">
	.title{
		display: flex;
		font-size: 14px;
	}
	.titleitem{
		flex: 1;
	}
	.active{
		color: hotpink;
	}
	.back img{
		vertical-align: middle;
	}
</style>
